<template>
	<view class="container">
		<uni-list>
			<uni-list-item title="收支类型管理" clickable @click="showCategoryPanel = !showCategoryPanel" rightText="管理" />
			<view v-if="showCategoryPanel" class="category-panel">
				<view class="category-tabs">
					<text :class="['tab', currentTab === 'income' ? 'active' : '']" @click="currentTab = 'income'">收入</text>
					<text :class="['tab', currentTab === 'expense' ? 'active' : '']" @click="currentTab = 'expense'">支出</text>
				</view>
				<view class="category-list">
					<view v-for="(category, index) in currentCategories" :key="index" class="category-item">
						<text class="category-name">{{category.name}}</text>
						<view class="category-actions">
							<uni-icons type="compose" size="20" color="#666" @click="editCategory(index)" />
							<uni-icons type="trash" size="20" color="#666" @click="deleteCategory(index)" />
						</view>
					</view>
				</view>
				<button class="add-btn" @click="showAddModal">添加类型</button>
			</view>
			<uni-list-item title="预算设置" clickable @click="showBudgetPanel = !showBudgetPanel" rightText="设置" />
			<view v-if="showBudgetPanel" class="budget-panel">
				<view class="form-item">
					<view class="form-label">月度预算</view>
					<uni-easyinput v-model="monthlyBudget" type="number" placeholder="请输入月度预算" />
				</view>
				<button class="add-btn" @click="saveBudget">保存预算</button>
			</view>
			<uni-list-item title="数据管理" clickable @click="showDataPanel = !showDataPanel" rightText="管理" />
			<view v-if="showDataPanel" class="data-panel">
				<button class="add-btn">导出数据（开发中）</button>
				<button class="add-btn">备份数据（开发中）</button>
				<button class="add-btn">恢复数据（开发中）</button>
			</view>
			<uni-list-item title="更新记录" clickable @click="goChangelog" rightText="查看" />
			<uni-list-item title="关于" clickable @click="showAboutPanel = !showAboutPanel" rightText="关于" />
			<view v-if="showAboutPanel" class="about-panel">
				<view class="about-title">财务管理系统</view>
				<view class="about-version">版本 1.0.0</view>
				<view class="about-desc">本地化个人财务管理工具，支持多平台，数据仅保存在本地。</view>
			</view>
		</uni-list>
		<!-- 添加/编辑类型弹窗 -->
		<uni-popup ref="popup" type="dialog">
			<view class="popup-content">
				<view class="popup-title">{{isEdit ? '编辑类型' : '添加类型'}}</view>
				<view class="form-item">
					<uni-easyinput v-model="formData.name" placeholder="请输入类型名称" />
				</view>
				<view class="form-buttons">
					<button class="btn cancel" @click="closePopup">取消</button>
					<button class="btn confirm" @click="saveCategory">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentTab: 'income',
			incomeCategories: [],
			expenseCategories: [],
			isEdit: false,
			editIndex: -1,
			formData: { name: '' },
			monthlyBudget: '',
			showCategoryPanel: false,
			showBudgetPanel: false,
			showDataPanel: false,
			showAboutPanel: false
		}
	},
	computed: {
		currentCategories() {
			return this.currentTab === 'income' ? this.incomeCategories : this.expenseCategories
		}
	},
	onShow() {
		this.loadFromStorage()
	},
	methods: {
		showAddModal() {
			this.isEdit = false
			this.editIndex = -1
			this.formData.name = ''
			this.$refs.popup.open()
		},
		editCategory(index) {
			this.isEdit = true
			this.editIndex = index
			this.formData.name = this.currentCategories[index].name
			this.$refs.popup.open()
		},
		deleteCategory(index) {
			uni.showModal({
				title: '提示',
				content: '确定要删除这个类型吗？',
				success: (res) => {
					if (res.confirm) {
						if (this.currentTab === 'income') {
							this.incomeCategories.splice(index, 1)
						} else {
							this.expenseCategories.splice(index, 1)
						}
						this.saveToStorage()
						this.loadFromStorage()
					}
				}
			})
		},
		closePopup() {
			this.$refs.popup.close()
		},
		saveCategory() {
			if (!this.formData.name.trim()) {
				uni.showToast({
					title: '请输入类型名称',
					icon: 'none'
				})
				return
			}
			const category = { name: this.formData.name.trim() }
			if (this.isEdit) {
				if (this.currentTab === 'income') {
					this.incomeCategories[this.editIndex] = category
				} else {
					this.expenseCategories[this.editIndex] = category
				}
			} else {
				if (this.currentTab === 'income') {
					this.incomeCategories.push(category)
				} else {
					this.expenseCategories.push(category)
				}
			}
			this.saveToStorage()
			this.loadFromStorage()
			this.closePopup()
			uni.showToast({
				title: this.isEdit ? '修改成功' : '添加成功'
			})
		},
		saveToStorage() {
			uni.setStorageSync('incomeCategories', this.incomeCategories)
			uni.setStorageSync('expenseCategories', this.expenseCategories)
			uni.setStorageSync('monthlyBudget', this.monthlyBudget)
		},
		loadFromStorage() {
			const incomeCategories = uni.getStorageSync('incomeCategories') || []
			const expenseCategories = uni.getStorageSync('expenseCategories') || []
			const monthlyBudget = uni.getStorageSync('monthlyBudget') || ''
			this.incomeCategories = incomeCategories
			this.expenseCategories = expenseCategories
			this.monthlyBudget = monthlyBudget
		},
		saveBudget() {
			this.saveToStorage()
			uni.showToast({
				title: '保存成功',
				icon: 'success'
			})
		},
		goChangelog() {
			uni.navigateTo({ url: '/pages/changelog/changelog' })
		}
	}
}
</script>

<style>
.container {
	padding: 0;
	background: #f8f8f8;
	min-height: 100vh;
}
.category-panel, .budget-panel, .data-panel, .about-panel {
	background: #fff;
	border-radius: 0 0 16rpx 16rpx;
	margin-bottom: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.06);
}
.category-tabs {
	display: flex;
	gap: 20rpx;
	margin-bottom: 20rpx;
}
.tab {
	flex: 1;
	text-align: center;
	padding: 15rpx 0;
	font-size: 28rpx;
	color: #666;
	border-radius: 8rpx;
	background: #f5f5f5;
	cursor: pointer;
}
.tab.active {
	background: #007aff;
	color: #fff;
}
.category-list {
	margin-bottom: 30rpx;
}
.category-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}
.category-item:last-child {
	border-bottom: none;
}
.category-name {
	font-size: 32rpx;
	color: #333;
}
.category-actions {
	display: flex;
	gap: 30rpx;
}
.add-btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #007aff;
	color: #fff;
	border-radius: 10rpx;
	font-size: 28rpx;
	margin-top: 20rpx;
}
.form-item {
	margin-bottom: 30rpx;
}
.form-label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 20rpx;
}
.about-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}
.about-version {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 20rpx;
}
.about-desc {
	font-size: 28rpx;
	color: #999;
	text-align: center;
}
.popup-content {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	width: 600rpx;
	box-sizing: border-box;
}
.popup-title {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
}
.form-buttons {
	display: flex;
	gap: 20rpx;
}
.btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 10rpx;
	font-size: 28rpx;
}
.cancel {
	background-color: #f5f5f5;
	color: #666;
}
.confirm {
	background-color: #007aff;
	color: #fff;
}
</style> 